<template> 
    <div id="welcome-background" class="background-image">
        <div>欢迎使用后台管理信息系统</div>
    </div>
</template>

<script>
export default {
    name: 'Welcome'
}
const images = [  
    '4.jpg', 
    '1.jpg',  
    '3.jpg',
    '1.jpg'  
    // 添加更多图片  
];  
let currentIndex = 0;  
  
function changeBackground() {  
    const backgroundDiv = document.getElementById('welcome-background');  
    currentIndex = (currentIndex + 1) % images.length; // 循环图片  
    backgroundDiv.style.backgroundImage = `url(${images[currentIndex]})`;  
}  
  
// 设置定时器，每2秒更换一次背景  
setInterval(changeBackground, 2000);  
  
// 页面加载时立即显示第一张图片  
changeBackground(); // 可选，如果你想在页面加载时立即显示第一张图片
</script>

<style scoped>
div {
    font: bold 50px "楷体";
    color: #409eff;
    text-align: center;
    line-height: 200px;
}
body, html {  
    height: 100%;  
    margin: 0;  
    overflow: hidden; /* 防止滚动条出现 */  
}  
  
.background-image {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-size: cover;  
    background-position: center;  
    transition: background-image 0.5s ease-in-out; /* 平滑过渡效果 */  
}
  
.welcome-background {  
    /* 背景图片 */  
    background-image: url('1.jpg'); /* 确保路径正确 */  
    background-size: cover; /* 覆盖整个容器 */  
    background-position: center; /* 居中显示 */  
    height: 100%; /* 与body和html高度相同 */  
    display: flex; /* 弹性布局 */  
    align-items: center; /* 垂直居中 */  
    justify-content: center; /* 水平居中 */  
    color: #fff; /* 文本颜色（根据需要调整） */  
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 文本阴影（可选） */  
}  
  
.welcome-background h1 {  
    margin: 0; /* 移除标题的默认外边距 */  
    font-size: 3em; /* 标题字体大小（根据需要调整） */  
}
</style>